<template>
  <div>
    <div v-if="!data.isInfo" style="padding-bottom: 50px">
      <el-row :gutter="10" v-if="data.total > 0">
        <el-table :data="data.tableData" stripe>
          <el-table-column label="用户" prop="name"></el-table-column>
          <el-table-column label="头像">
            <template #default="scope">
              <el-image
                :src="scope.row.avator"
                style="width: 40px; height: 40px; border-radius: 50%"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column label="操作" header-align="center" width="160">
            <template #default="scope">
              <el-button type="primary" @click="handleEdit(scope.row)"
                >对话</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </div>
    <div v-if="data.isInfo" class="data-info">
      <el-icon @click="data.isInfo = false" class="close"
        ><CloseBold
      /></el-icon>
      <div class="chat">
        <div v-for="chat in data.chats">
          <div v-if="chat.from == data.user.id" class="me">
            <div class="content">{{ chat.content }}</div>
            <div class="circle">我</div>
          </div>
          <div v-if="chat.from !== data.user.id" class="bot">
            <div class="circle">{{ data.userName.slice(0, 2) }}</div>
            <div class="content">{{ chat.content }}</div>
          </div>
        </div>
      </div>
      <div class="bottom">
        <el-input v-model="data.content" style="width: 100%;" autocomplete="off" />
        <el-button size="large" type="primary" @click="send">发送</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import request from "@/utils/request";
import { ElMessage } from "element-plus";

const data = reactive({
  user: JSON.parse(localStorage.getItem("system-user") || "{}"),
  categoryList: [],
  pageNum: 1,
  pageSize: 10,
  total: 0,
  chatList: [],
  name: "",
  activeCategoryId: null, // 当前选中的分类ID
  myStars: [],
  myAllStars: [],
  isInfo: false,
  viewInfo: {},
  goods: {},
  dialog: false,
  tableData: [],
  location: "",
  content: '',
  userName: '',
  curRow: {}
});

// 分页查询
const load = () => {
  // 获取个人信息
  request
    .get("/chat/page", {
      params: {
        pageNum: data.pageNum,
        pageSize: data.pageSize,
        teacherid: data.user.id,
      },
    })
    .then((res) => {
      data.tableData = res.data;
      data.total = res.total;
    });
};

const handleEdit = (item) => {
  data.curRow = item
  console.log(item.content);
  data.isInfo = true;
  data.chats = JSON.parse(item.content);
  console.log(data.chats)
  data.userName = item.name
};

const send = () => {
  if (!data.content) {
    ElMessage.error('请输入内容')
    return
  }
  data.chats.push({
    content: data.content,
    from: data.user.id
  })
  request
    .put("/chat/update", {
      ...data.curRow,
      content: JSON.stringify(data.chats)
    }).then(res => {
      console.log(res)
      data.content = ''
    })
}

load();
</script>

<style>
.active {
  color: white !important;
  background-color: #1967e3 !important;
}
.card {
  position: relative;
}
.star {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 10px;
  cursor: pointer;
  top: 300px;
}
.data-info {
  position: relative;
}
.close {
  position: absolute;
  right: 10px;
  top: -10px;
  cursor: pointer;
  z-index: 99;
  font-size: 20px;
}
.dialog-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  place-self: flex-start;
}
.chat{
  font-size: 12px;
  width: 100%;
  height: 90vh;
  overflow: hidden;
  overflow-y: scroll;
  padding: 15px;
}
.bottom {
  width: 90%;
  height: 40px;
  text-align: center;
  background: #fff;
  font-size: 15px;
  font-weight: bold;
  line-height: 40px;
  display: flex;
  justify-content: space-between;
}
.fasong {
  color: blueviolet;
}
.me {
  padding-left: 40%;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  justify-content: flex-end;
}
.bot {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.circle {
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  border: 1px solid lightcoral;
}

.content {
  background: lightpink;
  padding: 8px;
  border-radius: 10px;
  margin: 0 10px;
}
</style>
